<template>
  <div class="shopcar">
    <!-- 当购物车————没————东西的时候 的样式 -->
    <div class="cont" v-show="this.isShow2">
      <div class="emcar">
        <p>
          <img src="../../public/img/epcar.png" alt="" /> 购物车空空如也
          <span><a href="">去购物</a></span>
        </p>
      </div>
    </div>

    <!-- 当购物车————有————东西的时候 的样式 -->
    <div v-show="this.isShow">
      <div class="cont">
        <div class="tit">我的购物车</div>
      </div>

      <div class="cont">
        <table class="list">
          <thead></thead>

          <tbody class="splist">
            <tr v-for="(item, index) in car" :key="index">
              <td class="pick">
                <input type="checkbox" :value="item.id" @change="check(index)" v-model="item.checked" >
              </td>
              <td class="pic">
                <a href=""
                  ><img :src="item.path" alt="" width="100px" height="100px"
                /></a>
              </td>
              <td class="name">{{ item.name }} <span></span> <span></span></td>
              <td class="qut">
                <div>
                  <span @click="sub(index)">-</span
                  ><input
                    @change="kup(index)"
                    class="inp"
                    v-model="item.count"
                    type="number"
                  /><span @click="plus(index)">+</span>
                </div>
              </td>
              <td class="price">￥{{ item.price* item.count}}</td>
              <td class="remove">
                <span
                  ><img
                    @click="del(index)"
                    src="../../public/img/rem.png"
                    alt=""
                    width="20px"
                    height="20px"
                /></span>
              </td>
            </tr>

            <tr class="lst">
              <td class="opt"><input type="checkbox" v-model="flag" @change="checkAll">全选</td>
              <td class="t_foot">
                <div class="t_con">
                  数量 ： <span>{{ sum2 }}件</span>
                </div>
                <div class="t_price">
                  总价 :<span class="a_price">￥ {{ sum }}</span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- 商品结束———————————————————— -->
     
        <!-- 结算页面—————————————————————— -->
        <div class="cash">
          <div class="out" @click="out">结算</div>
          <div class="ct">继续购物</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
* {
  font-family: "Jost", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
　　input[type="number"]::-webkit-inner-spin-button,
　　input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.opt{
   margin-left:5px;
  padding: 0 !important; 
   input{
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
}
.pick{
  margin-left:5px;
  padding: 0 !important; 
  input{
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
}
.shopcar {
  width: 100%;
  .emcar {
    position: relative;
    top: 40px;
    p {
      font-size: 30px;
    }
  }

  .cont {
    width: 1200px;
    margin: auto;
    .tit {
      margin-top: 40px;
      font-size: 28px;
      font-weight: 300;
    }

    .list {
      margin-top: 50px;
      border-collapse: collapse;
      border-spacing: 0;
      table-layout: auto;
      width: 100%;

      tr {
        display: block;
        position: relative;
        text-align: left;
        border: solid 1px #6666;
        border-bottom: none;
        td {
          display: inline-block;
          line-height: 24px;
          border: none;
          text-align: left;
          padding: 30px 30px 30px 0;
        }
        .remove {
          span {
            cursor: pointer;
          }
        }
        .pic {
          width: 160px;
          padding-left: 30px;
        }
        .name {
          color: #333333;
          width: 35%;
          font-size: 16px;
        }
        .price {
          width: 20%;
          font-size: 20px;
          color: #111;
          font-weight: 500;
        }
        .qut {
          width: 22%;

          div {
            border: #d9d9d9 solid 1px;
            width: 90px;
            height: 40px;
            line-height: 34px;
            padding-left: 2px;
          }
          span {
            font-size: 28px;
            cursor: pointer;
            color: #d9d9d9;
            transition: all linear 0.3s;
            &:hover {
              color: #000000;
            }
          }
          input {
            width: 30px;
            margin: 0 10px;
            border: none;
            outline: none;
            text-align: center;
            font-size: 18px;
          }
        }
      }
      .lst {
      
        border-bottom: solid 1px #6666;
      }
      .t_foot {
          margin-left: 41%;
        padding: 50px 60px 50px 30px;
        div {
          display: inline-block;
        }
        .t_con {
          margin-right: 120px;
        }
        .t_price {
          padding: 8px 0;
        }
      }
    }

    .cash {
      div {
        font-size: 16x !important;
        float: right;
        height: 44px;
        line-height: 44px;
        text-align: center;

        margin-top: 30px;
        background: transparent;
        color: #333333;
        border: 1px solid #e9e9e9;
        margin-left: 15px;
        transition: all linear 0.3s;
        cursor: pointer;
        &:hover {
          background-color: #7f87ab;
          color: #fff;
        }
      }
      .ct {
        width: 200px;
        margin-right: 30px;
      }
      .out {
        width: 100px;
      }
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      //控制购物车的样式--存在还是消失
      isShow: true,
      isShow2: "",
      car: [],
      name: "",
      flag:false,
      checkDate:[],
    
         
      shopcar: [
        { path: "img/t1.jpg", name: "音响", price: 75, num: 1 },
        { path: "img/sp1.jpg", name: "键盘", price: 85, num: 1 },
        { path: "img/sp2.jpg", name: "耳机", price: 95, num: 1 },
      ],
    };
  },
  methods: {
    check(index){
     
          this.checkDate=this.car.filter(item=>{
            return item.checked==true
          })
          console.log(this.checkDate);
          if(this.checkDate.length==this.car.length){
            this.flag=true
          }else{
            this.flag=false
          }
    },
    checkAll(){
        for (let i = 0; i < this.car.length; i++) {
        if (this.flag==true) {
          this.car[i].checked = true
        }else{
           this.car[i].checked = false
        }
          
        }
    },

    plus(index) {
      var num = this.car[index].id;
      var user = this.name

      this.$axios
        .post(
          "http://localhost:520/shopcar",
          "user=" + user +"&name=" + name + "&id=" + num + "&way=" + "plus"
        )
        .then((data) => {
          console.log(data);
             if (data.data.code == "200") {
               this.car[index].count++;


            } else if (data.data.code == "400") {
            
            }
        });
    },

    sub(index) {
      var num = this.car[index].id;
      var user = this.name

      if (this.car[index].count == 1) {
        alert("最少一件哦");
      } else {
      
        this.$axios
          .post(
            "http://localhost:520/shopcar",
            "user=" + user +"&name=" + name + "&id=" + num + "&way=" + "sub"
          )
          .then((data) => {
            if (data.data.code == "200") {
               this.car[index].count--;
               


            } else if (data.data.code == "400") {
            
            }
          });
      }
    },

    del(index) {
      var user = this.name
      if(window.confirm('你确定要删除吗？')){

      var num = this.car[index].id;
     
      this.$axios
        .post(
          "http://localhost:520/shopcar",
          "user=" + user +"&name=" + name + "&id=" + num + "&way=" + "del"
        )
        .then((data) => {
         if (data.data.code == "200") {
               this.car.splice(index,1)
                

                      if (this.car.length != 0) {
          this.isShow = true;
          this.isShow2 = false;
        } else {
          this.isShow = false;
          this.isShow2 = true;
        }


            } else if (data.data.code == "400") {
            
            }
          
        });
       

      
        }
    },

    kup(index) {
      var inp = document.getElementsByClassName("inp")[index];
      var count = inp.value;
      count = parseInt(count);
      console.log("我出发了");
    },


    //结算
    out(){
     
      var arr = []
         this.car.forEach((v) => {
        if (v.checked) {
          arr.push(v.id)
        }
       
      });

      
        console.log(arr);
      
      if (arr.length>0) {
           arr = JSON.stringify(arr)
          localStorage.setItem("shop",arr); 
        
               this.$router.push('/sort')
             


      }else{
        alert('您还没有选择商品')
      }
        

     
    }
  },

  computed: {
    sum() {
      var res = 0;
      this.car.forEach((v) => {
        if (v.checked) {
           res += v.count * v.price;
        }
       
      });
      return res;
    },

    sum2() {
      var res1 = 0;
      this.car.forEach((v) => {
        if (v.checked) {
           if (v.count > 0) {
          res1 += parseInt(v.count);
        }
        }
       
      });
      return res1;
    },
  },


  mounted() {
   

    var name = sessionStorage.getItem("name");
    this.name = name;
 if (!sessionStorage.getItem("name")) {
           alert('请登入')
           this.$router.push('/login')
         }else{
    this.$axios
      .post("http://localhost:520/shopcar", "name=" + name)
      .then((data) => {
       
        this.car = data.data;
        console.log(data);
        if (this.car.length != 0) {
          this.isShow = true;
          this.isShow2 = false;
        } else {
          this.isShow = false;
          this.isShow2 = true;  
        }
    console.log(data);
       
      });
      }
  },

  beforeDestroy(){

  }
};
</script>